From 211b5dbdda47c4bb19f3ebc274253b21e1b81bc4 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Mon, 8 Dec 2025 01:46:14 +0900
Subject: (김준회) 서버사이드 페칭 예시 소팅 오류 수정
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[lng]/test/table-v2/actions.ts | 29 +++++++++++++++++++++++++++--
 app/[lng]/test/table-v2/page.tsx   | 11 +++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

(limited to 'app/[lng]/test')

diff --git a/app/[lng]/test/table-v2/actions.ts b/app/[lng]/test/table-v2/actions.ts
index e1737083..f5fd5f66 100644
--- a/app/[lng]/test/table-v2/actions.ts
+++ b/app/[lng]/test/table-v2/actions.ts
@@ -5,7 +5,7 @@ import { testProducts, testOrders, testCustomers } from "@/db/schema/test-table-
 import { createTableService } from "@/components/client-table-v2/adapter/create-table-service";
 import { DrizzleTableState } from "@/components/client-table-v2/adapter/drizzle-table-adapter";
 import { productColumnDefs, OrderWithDetails, ServerColumnMeta } from "./column-defs";
-import { count, eq, desc, sql, asc } from "drizzle-orm";
+import { SQL, count, eq, desc, sql, asc } from "drizzle-orm";
 import { TestProduct } from "@/db/schema/test-table-v2";
 
 // ============================================================
@@ -182,6 +182,31 @@ export async function getOrderTableData(tableState: DrizzleTableState): Promise<
   const limit = pageSize;
   const offset = pageIndex * pageSize;
 
+  // Build ORDER BY clause based on sorting state
+  const orderByClauses =
+    tableState.sorting?.reduce<SQL<unknown>[]>((clauses, sort) => {
+      const columnMap: Record<string, any> = {
+        id: testOrders.id,
+        orderNumber: testOrders.orderNumber,
+        quantity: testOrders.quantity,
+        unitPrice: testOrders.unitPrice,
+        totalAmount: testOrders.totalAmount,
+        status: testOrders.status,
+        orderedAt: testOrders.orderedAt,
+        customerName: testCustomers.name,
+        customerEmail: testCustomers.email,
+        customerTier: testCustomers.tier,
+        productName: testProducts.name,
+        productSku: testProducts.sku,
+      };
+
+      const column = columnMap[sort.id];
+      if (!column) return clauses;
+
+      clauses.push(sort.desc ? desc(column) : asc(column));
+      return clauses;
+    }, []) ?? [];
+
   // 커스텀 조인 쿼리 작성
   const data = await db
     .select({
@@ -203,7 +228,7 @@ export async function getOrderTableData(tableState: DrizzleTableState): Promise<
     .from(testOrders)
     .leftJoin(testCustomers, eq(testOrders.customerId, testCustomers.id))
     .leftJoin(testProducts, eq(testOrders.productId, testProducts.id))
-    .orderBy(desc(testOrders.orderedAt))
+    .orderBy(...(orderByClauses.length > 0 ? orderByClauses : [desc(testOrders.orderedAt)]))
     .limit(limit)
     .offset(offset);
 
diff --git a/app/[lng]/test/table-v2/page.tsx b/app/[lng]/test/table-v2/page.tsx
index e7fb5bdd..65c0ee1d 100644
--- a/app/[lng]/test/table-v2/page.tsx
+++ b/app/[lng]/test/table-v2/page.tsx
@@ -99,6 +99,8 @@ function ClientSideTable() {
               enablePagination
               enableGrouping
               height="100%"
+              enableUserPreset={true}
+              tableKey="test-table-v2-pattern1"
             />
           </div>
         </LoadingOverlay>
@@ -188,6 +190,8 @@ function FactoryServiceTable() {
               onColumnFiltersChange={setColumnFilters}
               globalFilter={globalFilter}
               onGlobalFilterChange={setGlobalFilter}
+              enableUserPreset={true}
+              tableKey="test-table-v2-pattern-2-A"
             />
           </div>
         </LoadingOverlay>
@@ -208,6 +212,7 @@ function ServerGroupingTable() {
   const [isGrouped, setIsGrouped] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
   const [totalRows, setTotalRows] = React.useState(0);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -220,7 +225,7 @@ function ServerGroupingTable() {
       setIsLoading(true);
       try {
         const result = await getProductTableDataWithGrouping(
-          { pagination, grouping },
+          { pagination, grouping, sorting },
           expandedGroups
         );
         
@@ -242,7 +247,7 @@ function ServerGroupingTable() {
     };
 
     fetchData();
-  }, [pagination, grouping, expandedGroups]);
+  }, [pagination, grouping, sorting, expandedGroups]);
 
   // 그룹 토글
   const toggleGroup = (groupKey: string) => {
@@ -374,6 +379,8 @@ function ServerGroupingTable() {
                 height="400px"
                 pagination={pagination}
                 onPaginationChange={setPagination}
+                sorting={sorting}
+                onSortingChange={setSorting}
                 // 그룹핑 상태 연결
                 grouping={grouping}
                 onGroupingChange={handleGroupingChange}
-- 
cgit v1.2.3